<template>
    <div class="container">
        <!-- 左侧头像区域 -->
        <div class="ai-image">
            <ai ref="aiAvatar" />
        </div>

        <!-- 右侧内容区域 -->
        <div class="box">
            <div class="text-content">
                <div style="height:20%;line-height: 1.5;">
                    <p>你好！我是 Mango，你的 AI 面试小助手</p>
                    <p>你所要面试的岗位是：<strong>{{ positionLabel }}</strong></p>
                    <p>该岗位的需求是:</p>
                </div>
                <p class="pre-line" v-html="formattedContent"></p>
            </div>
            <div class="button-area">
                <button class="next-button" @click="jumpToNext()">下一步 ></button>
            </div>
        </div>
    </div>

</template>

<script>
import request from '@/utils/request'
import ai from '@/views/ai/views/avatardemo.vue'
import jobRequireDetail from '@/assets/position/job-require-detail.json'
import resumeSDK from '../../../../store/modules/resumeSDK'
import roleOptions from '@/assets/position/role-options.js'

export default {
    components: { ai },
    data() {
        return {
            formattedContent: '', // 用于存储格式化后的 content
            query: {
                name: '前端', // 岗位名称
            },
            treeProps: {
                children: 'children',
                label: 'fullName',
                value: 'id'
            },
            list: [],
            listLoading: true,
            total: 0,
            listQuery: {
                currentPage: 1,
                pageSize: 20,
                sort: "desc",
                sidx: "",
            },
            // formVisible: false,
            // exportBoxVisible: false,
            columnList: [
                { prop: 'name', label: '岗位名称' },
                { prop: 'content', label: '岗位要求' },
            ],
        }
    },
    computed: {
        techField() {

            return this.$store.getters['userSelection/getTechField']
        },
        position() {
            return this.$store.getters['userSelection/getPosition']
        },
        languages() {
            return this.$store.getters['userSelection/getLanguage']
        },
        // resumeSDK() {
        //     return this.$store.getters['resumeSDK/getResumeResult']
        // },
        positionLabel() {
            // 先根据技术领域找到岗位列表
            const roles = roleOptions[this.techField] || [];
            // 再在岗位列表中通过 value 找 label
            const found = roles.find(item => item.value === this.position);
            return found ? found.label : '未知职位';
        }
    },
    created() {
        this.initData(),
            this.$nextTick(() => {
                this.$refs.aiAvatar.startAll()
                this.$refs.aiAvatar.startVirtualHuman()
                this.$refs.aiAvatar.sendTextToAvatar()
            })
    },
    methods: {
        initData() {
            const position = this.position // 例如 "前端开发工程师"
            const requirement = jobRequireDetail[position]

            if (requirement) {
                this.formattedContent = requirement.replace(/\n/g, '<br>')
            } else {
                this.formattedContent = '暂无该岗位的需求说明。'
            }
        },

        jumpToNext() {
            this.$router.push({ path: '/guide2' });
            this.$refs.aiAvatar.closeAll()
        }
    }
}
</script>

<style scoped>
.container {
    display: flex;
    height: 100%;
    gap: 20px;
    padding: 40px;
    box-sizing: border-box;
}

/* 左侧数字人头像 */
.ai-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    height: 100%;
    width: 33%;
}

.avatar-img {
    max-width: 80%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* 右侧内容框 */
.box {
    flex: 2;
    background-color: #ffffff;
    border: 1px solid #dcdfe6;
    border-radius: 12px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    height: 100%;
    width: 66%;
}

.text-content {
    font-size: 16px;
    color: #333;
    margin-bottom: 16px;
    white-space: pre-wrap;
    height: 90%;
}

.button-area {
    display: flex;
    justify-content: flex-end;
    height: 10%;
}

.next-button {
    padding: 10px 20px !important;
    font-size: 16px !important;
    background-color: #409eff !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
}

.pre-line {
    height: 80%;
    white-space: pre-wrap;
    line-height: 1.5;
    overflow: auto;
    padding: 10px;
}

/* 自定义滚动条样式（Chrome、Safari等基于WebKit的浏览器） */
.pre-line::-webkit-scrollbar {
    width: 8px;
}

.pre-line::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.pre-line::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.pre-line::-webkit-scrollbar-thumb:hover {
    background: #555;
    width: 8px;
}
</style>
